<template>
  <div>
    <!-- 我的订单 -->
    <ul class="nav">
      <li
        style="color: #cc6633; font-size: 18px !important; margin: 0 5px 0 -5px"
        class="iconfont"
      >
        &#xe638;
      </li>
      我的心动卡
    </ul>
    <div class="heart">
      <p class="f1">￥ 0</p>
      <div class="f2">
        <el-button type="text" @click="open">绑定心动卡</el-button>
        <span>卡片查询</span>
      </div>
    </div>
    <div class="order">
      <ul class="order_nav">
        <li class="f1 on">未使用(0)</li>
        <li class="f1">已使用(0)</li>
        <li class="f1">已过期(0)</li>
      </ul>
    </div>
    <div class="clear" style="clear: both"></div>
  </div>
</template>
<script>
export default {
  methods: {
    open() {
      this.$alert(
        `<div>
      <input
        style="padding: 10px; margin: 10px;width:80%;background:#f5f5f5;border:none;border-radius: 8px;outline: none;"
        type="text"
        placeholder="请输入卡号"
      /><br />
      <input
        style="padding: 10px; margin: 10px;width:80%;background:#f5f5f5;border:none;border-radius: 8px;outline: none;"
        type="text"
        placeholder="请输入密码"
      />
    </div>`,
        "绑定心动卡",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped src="@/assets/scss/Order.scss"></style>
